<route lang="json5" type="page">
{
  layout: 'default',
  style: {
    navigationBarTitleText: '我的文化定制活动',
  },
}
</route>

<script setup>
import BottomOperateBox from '@/components/BottomOperateBox.vue'
import LevelActivityItem from '@/components/LevelActivityItem.vue'
import { currentPageNeedRefresh, uniNavigateTo } from '@/utils'
import CustomApi from '@/service/custom'
import JudgePermission from '@/components/JudgePermission.vue'

/** ----------- 分页加载 start --------- */
const pageObj = ref({
  pageNo: 1,
  pageSize: 10,
})
const scrollState = reactive({
  refresherTriggered: false,
  dataList: [],
  loadState: 'loading',
})

const getDataList = async () => {
  if (scrollState.loadState === 'finished') return
  try {
    const params = {
      ...pageObj.value,
      column: 'createTime',
      order: 'desc',
    }
    const { code, result } = await CustomApi.getLevelActivityPage(params)
    if (code === 200 && result) {
      const { records, pages } = result
      if (records?.length) {
        scrollState.dataList = [...scrollState.dataList, ...records]
      }
      if (pageObj.value.pageNo < pages) {
        pageObj.value.pageNo++
      } else {
        scrollState.loadState = 'finished'
      }
    } else {
      scrollState.loadState = 'error'
    }
  } catch (e) {
    scrollState.loadState = 'error'
  }
}

const reset = () => {
  pageObj.value.pageNo = 1
  scrollState.dataList = []
  scrollState.loadState = 'loading'
}

const onRefresherrefresh = async () => {
  scrollState.refresherTriggered = true
  await refreshList()
  scrollState.refresherTriggered = false
}

const refreshList = async () => {
  try {
    uni.showLoading()
    reset()
    await getDataList()
  } finally {
    uni.hideLoading()
  }
}
refreshList()
/** ----------- 分页加载 end --------- */

onShow(() => {
  if (currentPageNeedRefresh()) {
    refreshList()
  }
})
</script>

<template>
  <view class="common-page-bg">
    <scroll-view
      class="scroll-container"
      scroll-y
      refresher-enabled
      enable-back-to-top
      :refresher-triggered="scrollState.refresherTriggered"
      @refresherrefresh="onRefresherrefresh"
      @scrolltolower="getDataList"
    >
      <template v-if="scrollState.dataList.length">
        <LevelActivityItem
          v-for="item in scrollState.dataList"
          :key="item.id"
          show-status
          :info="item"
          @custom-click="
            uniNavigateTo(`/pages-sub/custom-menu/detail/index?id=${item.id}`)
          "
        />
        <wd-loadmore
          finished-text="没有更多了"
          :state="scrollState.loadState"
          @reload="getDataList"
        />
      </template>
      <wd-status-tip
        v-else
        image="content"
        tip="暂无内容"
      />
    </scroll-view>
    <JudgePermission action="hall:hall_joint_activity:add">
      <BottomOperateBox>
        <wd-button
          custom-class="common-main-btn"
          @click="uniNavigateTo('/pages-sub/township-activity/add/index')"
        >
          创建文化定制活动
        </wd-button>
      </BottomOperateBox>
    </JudgePermission>
  </view>
</template>

<style lang="scss" scoped>
.common-page-bg {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.scroll-container {
  padding: 24rpx 24rpx 160rpx 24rpx;
  box-sizing: border-box;
}
</style>
